import Head from 'next/head'
import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import Footer  from '../components/Footer'
import {Row,Col,Breadcrumb,Affix} from 'antd'
import {CalendarOutlined,FolderOutlined,FireOutlined} from  '@ant-design/icons';
// import ReactMarkdown from 'react-markdown'
//被marked 代替
// import remarkGfm from 'remark-gfm'
// import MarkNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'

//引入markdown
import { marked } from 'marked'
import hljs from "highlight.js";
//引入样式文件
import 'highlight.js/styles/monokai-sublime.css'
//引入tocify 方便生成markdown 目录文件
import Tocify from '../components/tocify.tsx'

import axios from 'axios'
import apiUrl from '../config/apiUrl'

const Detailed = (props)=>{
  console.log(props)
  //实例化tocify
  const tocify = new Tocify()
  //marked 渲染
  const renderer = new marked.Renderer();
  //markedn 渲染模式提供锚点给tocify
  //### js  js表示text ###表示等级
  renderer.heading = function(text, level, raw) {
    const anchor = tocify.add(text, level);
    return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
  };

  marked.setOptions({
    renderer:renderer,
    gfm:true, //渲染的样式和github相似
    pedantic:false,//容错配置，false为不保证我穿过来的值是完成正确的，marked自动改错
    sanitize:false,//是否忽略HTML标签
    // tables:true,//是否输出table样式
    breaks:true,//是否输出GitHub的换行符
    smartLists:true,//是否自动渲染列表样式
    highlight:function(code){ //如何让代码显示高亮
      return hljs.highlightAuto(code).value
    }
  })

  let html = marked.parse(props.article_content)
return (
  <div>
    <Head>
      <title>Detailed</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <Header />
    <Row className="comm-main" justify="center">
      <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
      <div>
        <div className="bread-div">
          <Breadcrumb>
            <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
            <Breadcrumb.Item><a href="/">视频教程</a></Breadcrumb.Item>
            <Breadcrumb.Item>xxx</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <div className="detailed-title">
          React实战教程 更新第10记
        </div>
        <div className="list-icon center">
          <span><CalendarOutlined />2019-05-21</span>
          <span><FolderOutlined />视频教程</span>
          <span><FireOutlined />5852人</span>
        </div>
        <div className="detailed-content" dangerouslySetInnerHTML={{__html:html}}>

        </div>
      </div>

      </Col>
      <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
          <Affix offsetTop={5}>
            <div className='detailed-nav comm-box'>
              <div className="nav-title">文章目录</div>
              {tocify && tocify.render()}
            </div>
          </Affix>
      </Col>
    </Row>
    <Footer />
  </div>
)
}


Detailed.getInitialProps = async(context)=>{
  let id = context.query.id
  const promise = axios(apiUrl.getAriticleById+id).then(res=>{
    return res.data.data[0]
  })
  return await promise
}


export default Detailed;